<template>
	<view class="content">
		<view class="reser-list">
			<view class="reser-timer" v-for="(item,i) in reserList" :key="item.id" @click="change(item)">
				<view class="time">
					{{item.openTime}}
				</view>
				<view class="status">
					<text style="color: red;" v-if="item.nowPeople >= item.maxPeople">已约满</text>
					<text style="color: #67C23A;" v-else>可预约</text>
				</view>
				<view class="remain">
					<text>剩余：{{item.maxPeople - item.nowPeople}}人</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["reserList"],
		methods: {
			change(item) {
				this.$emit('changeReser', item);
			}
		}
	}
</script>

<style lang="less" scoped>
	.reser-list {
		width: 100%;
		padding: 30rpx;

		.reser-timer {
			border: 1px #C0C4CC solid;
			border-radius: 10rpx;
			display: inline-block;
			width: 20%;
			font-size: 25rpx;
			padding: 15rpx;
			text-align: center;
			margin: 3% 3% 3% 3%;
			color: #C0C4CC;

			view {
				margin-top: 5rpx;
			}
		}
	}
</style>
